<!-- 部门管理 -->
<style lang="less" scoped>
.project1 {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 200px;
    display: inline-block;
    margin-left: 20px;
  }
}
.time {
  font-size: 14px;
  font-weight: bold;
}
.content {
  padding-left: 5px;
}
</style>


<template>
  <div class="project1">
    <Card :bordered="false">
      <p slot="title"
         class="white">待办事项 > <span class="select-font">重点项目</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addDepartment">新增重点项目</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-left: 20px">删除重点项目</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.pro_name"
                 :maxlength="20"
                 style="width:200px;margin-left: 20px"
                 placeholder="请输入项目名称"></Input>
        </Form>
        <area-select @getData="getAreaData"
                     class="smallArr"></area-select>
        <Button type="info"
                style="margin-left:20px"
                @click="submitSearch('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="departmentData"
             @on-selection-change="showSelect"
             :columns="theadArr"
             stripe></Table>
      <Page class="pull-right"
            :total="waterRecordPage.total"
            :current="waterRecordPage.current"
            :page-size="waterRecordPage.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <Modal v-model="departmentModal"
             width="800"
             :mask-closable="false">
        <div slot="header">{{updateTitle}}</div>
        <Form :model="modelItem"
              :rules="rules"
              :label-width="80">
          <Form-item label="项目名称"
                     prop="pro_name">
            <Input v-model="modelItem.pro_name"
                   :maxlength="16"
                   placeholder="请输入项目名称"></Input>
          </Form-item>
          <Form-item label="项目区域"
                     prop="pro_area">
            <Cascader :data="areaArr"
                      class="smallArr"
                      placeholder="请选择地区"
                      v-model="modelItem.pro_area"></Cascader>
          </Form-item>
          <Form-item label="项目地址"
                     prop="address">
            <Input v-model="modelItem.address"
                   placeholder="请输入项目地址"></Input>
          </Form-item>
          <Form-item label="计划投资"
                     prop="money">
            <Input v-model="modelItem.money"
                   :maxlength="16"
                   placeholder="请输入计划投资"></Input>
          </Form-item>
          <Form-item label="牵头单位"
                     prop="lead_com">
            <Input v-model="modelItem.lead_com"
                   :maxlength="16"
                   placeholder="请输入牵头单位"></Input>
          </Form-item>
          <Form-item label="项目状态"
                     prop="pro_state">
            <Select v-model="modelItem.pro_state"
                    clearable>
              <Option v-for="item in stateList"
                      :value="item.title"
                      :key="item.title">{{ item.title }}</Option>
            </Select>

          </Form-item>
          <Form-item label="责任单位"
                     prop="duty_com">
            <Input v-model="modelItem.duty_com"
                   :maxlength="16"
                   placeholder="请输入责任单位"></Input>
          </Form-item>
          <Form-item label="项目批示"
                     prop="pro_ins">
            <Input v-model="modelItem.pro_ins"
                   :maxlength="100"
                   placeholder="请输入批示"></Input>
          </Form-item>
          <Form-item label="项目督查"
                     prop="pro_overseer">
            <Input v-model="modelItem.pro_overseer"
                   :maxlength="100"
                   placeholder="请输入督查"></Input>
          </Form-item>
          <Form-item label="计划时间"
                     prop="plan_time">
            <DatePicker format="yyyy-MM"
                        type="month"
                        @on-change="change"
                        placeholder="选择日期"></DatePicker>
          </Form-item>
          <Form-item label="项目描述"
                     prop="pro_overview">
            <Input v-model="modelItem.pro_overview"
                   :maxlength="300"
                   placeholder="请输入项目描述"></Input>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button v-if="btnSave"
                  type="primary"
                  @click="ok">保存</Button>
          <Button v-if="btnChange"
                  type="primary"
                  @click="changeDepartment">修改</Button>
          <Button @click="cancel">取消</Button>
        </div>
      </Modal>
      <del-modal ref="delModal"
                 title='项目'
                 @del="del"
                 :delArr="selectData"
                 :url="urlDepartmentDel"></del-modal>
      <Modal v-model="jinduModal"
             :mask-closable="false"
             title="项目进度情况"
             @on-ok="newJindu"
             width="600">
        <Form :model="jinduItem"
              :label-width="90">
          <Form-item label="时间"
                     prop="sch_time">
            <DatePicker :value="jinduItem.sch_time"
                        format="yyyy-MM-dd"
                        type="date"
                        @on-change="change2"
                        placeholder="选择日期"></DatePicker>
          </Form-item>
          <Form-item label="项目进度介绍"
                     prop="sch_content">
            <Input v-model="jinduItem.sch_content"
                   :maxlength="300"
                   placeholder="请输入项目描述"></Input>
          </Form-item>
        </Form>
        <div>
          <ul class="ivu-timeline"
              id="timeZou">

          </ul>
        </div>
      </Modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
import areaSelect from 'public/areaSelect';
export default {
  components: {
    'del-modal': delModal,
    'area-select': areaSelect,
  },
  data() {
    return {
      urlDepartmentList: '/bus/project/list',
      urlDepartmentNew: '/bus/project/new',
      urlDepartmentEdit: '/bus/project/edit',
      urlDepartmentDel: '/bus/project/del',
      urlAddressList: '/law/city/getTree',
      departmentData: [],
      rules: {
        pro_name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' },
        ],
        pro_area: [
          {
            required: true,
            type: 'array',
            message: '项目区域不能为空',
            trigger: 'change',
          },
        ],
        address: [
          { required: true, message: '项目地址不能为空', trigger: 'blur' },
        ],
        money: [
          { required: true, message: '项目金额不能为空', trigger: 'blur' },
        ],
        lead_com: [
          { required: true, message: '牵头单位不能为空', trigger: 'blur' },
        ],
        pro_state: [
          { required: true, message: '项目状态不能为空', trigger: 'change' },
        ],
        duty_com: [
          { required: true, message: '责任单位不能为空', trigger: 'blur' },
        ],
        pro_ins: [
          { required: true, message: '项目批示不能为空', trigger: 'blur' },
        ],
        pro_overseer: [
          { required: true, message: '项目督查不能为空', trigger: 'blur' },
        ],
        plan_time: [
          { required: true, message: '计划时间不能为空', trigger: 'change' },
        ],
        pro_overview: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' },
        ],
      },
      formItem: {
        pro_name: '',
      },
      stateList: [
        {
          title: '项建编制',
        },
        {
          title: '可研论证',
        },
        {
          title: '初步设计',
        },
        {
          title: '招投标',
        },
        {
          title: '开工',
        },
        {
          title: '停工',
        },
        {
          title: '完工',
        },
        {
          title: '竣工',
        },
      ],
      theadArr: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '项目名称',
          key: 'pro_name',
        },
        {
          title: '项目地址',
          key: 'address',
        },
        {
          title: '计划投资',
          key: 'money',
        },
        {
          title: '牵头单位',
          key: 'lead_com',
        },
        {
          title: '项目状态',
          key: 'pro_state',
        },
        {
          title: '责任单位',
          key: 'duty_com',
        },
        {
          title: '计划时间',
          key: 'plan_time',
        },
        {
          title: '项目描述',
          key: 'pro_overview',
        },
        {
          title: '用户操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row, params.index);
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.saveRow = params.row;
                      this.jinduModal = true;
                      this.jinduItem = {
                        sch_time: '',
                        sch_content: '',
                      };
                      let html = '';
                      this.saveRow.schedule.map(item => {
                        html += `<li class='ivu-timeline-item'><div class='ivu-timeline-item-tail'></div><div class='ivu-timeline-item-head ivu-timeline-item-head-blue'></div><div class='ivu-timeline-item-content'><p class='time'>${item.sch_time}</p><p class='content'>${item.sch_content}</p></div></li>`;
                      });
                      $('#timeZou').html(html);
                    },
                  },
                },
                '项目进度'
              ),
            ]);
          },
        },
      ],
      waterRecordPage: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      actionPage: '1',
      area: {},
      areaArr: [],
      departmentModal: false,
      btnChange: false,
      btnSave: false,
      modelItem: {},
      updateTitle: '',
      selectData: [],
      addressData: [],
      modal2: false,
      jinduModal: false,
      jinduItem: {
        sch_time: '',
        sch_content: '',
      },
      saveRow: {},
    };
  },
  methods: {
    submitSearch(page = 1) {
      let params = {
        data: {
          order: { _id: -1 },
          searchValue: {},
          pageSize: 13,
          page,
        },
        url: this.urlDepartmentList,
        token: storage.session.get('token'),
        success: res => {
          this.departmentData = res.data.result.result;
          this.waterRecordPage.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.pro_name !== '') {
        params.data.searchValue.pro_name = `${this.formItem.pro_name}|#|like`;
      }
      if (this.area !== undefined && this.area.name !== undefined) {
        if (this.area.level == '2') {
          params.data.searchValue['location.area'] = this.area.name;
        } else if (this.area.level == '3') {
          params.data.searchValue['location.town'] = this.area.name;
        }
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.submitSearch(page);
      this.actionPage = page;
    },
    change(data) {
      this.modelItem.plan_time = data;
    },
    change2(data) {
      this.jinduItem.sch_time = data;
    },
    addDepartment() {
      this.departmentModal = true;
      this.btnChange = false;
      this.btnSave = true;
      this.modelItem = {
        pro_name: '',
        pro_area: [],
        pro_overview: '',
        pro_state: '',
        duty_com: '',
        lead_com: '',
        plan_time: '',
        money: '',
        address: '',
        pro_ins: '',
        pro_overseer: '',
      };
      this.updateTitle = '新增重点项目';
    },
    ok() {
      let that = this;
      let params = {};

      params.data = {
        pro_name: this.modelItem.pro_name,
        location: {},
        pro_overview: this.modelItem.pro_overview,
        pro_state: this.modelItem.pro_state,
        duty_com: this.modelItem.duty_com,
        lead_com: this.modelItem.lead_com,
        plan_time: this.modelItem.plan_time,
        money: this.modelItem.money,
        address: this.modelItem.address,
        pro_ins: this.modelItem.pro_ins,
        pro_overseer: this.modelItem.pro_overseer,
      };
      if (this.modelItem.pro_area[1] == this.modelItem.pro_area[0]) {
        params.data.location.city = this.modelItem.pro_area[0];
      } else if (this.modelItem.pro_area[1] == this.modelItem.pro_area[2]) {
        params.data.location.city = this.modelItem.pro_area[0];
        params.data.location.area = this.modelItem.pro_area[1];
      } else {
        params.data.location.city = this.modelItem.pro_area[0];
        params.data.location.area = this.modelItem.pro_area[1];
        params.data.location.town = this.modelItem.pro_area[2];
      }
      params.url = this.urlDepartmentNew;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '新增成功',
          });
          that.departmentModal = false;
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择项目');
      }
    },
    del() {
      this.selectData = [];
      this.submitSearch(this.actionPage);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    cancel() {
      this.departmentModal = false;
    },
    edit(row, index) {
      console.log(row);
      this.updateTitle = '编辑重点项目';
      this.departmentModal = true;
      this.btnChange = true;
      this.btnSave = false;
      this.modelItem = {
        pro_name: row.pro_name,
        pro_overview: row.pro_overview,
        pro_state: row.pro_state,
        duty_com: row.duty_com,
        lead_com: row.lead_com,
        plan_time: row.plan_time,
        money: row.money,
        _id: row._id,
        address: row.address,
        pro_ins: row.pro_ins,
        pro_overseer: row.pro_overseer,
      };
      this.modelItem.pro_area = [];
      this.modelItem.pro_area.push(row.location.city);
      if (row.location.area !== undefined) {
        this.modelItem.pro_area.push(row.location.area);
        if (row.location.town !== undefined) {
          this.modelItem.pro_area.push(row.location.town);
        } else {
          this.modelItem.pro_area.push(row.location.area);
        }
      } else {
        this.modelItem.pro_area.push(row.location.city);
      }

      console.log(this.modelItem.pro_area);
    },
    changeDepartment() {
      let that = this;
      let params = {};
      params.data = {
        pro_name: this.modelItem.pro_name,
        location: {},
        _id: this.modelItem._id,
        pro_overview: this.modelItem.pro_overview,
        pro_state: this.modelItem.pro_state,
        duty_com: this.modelItem.duty_com,
        lead_com: this.modelItem.lead_com,
        plan_time: this.modelItem.plan_time,
        money: this.modelItem.money,
        address: this.modelItem.address,
        pro_ins: this.modelItem.pro_ins,
        pro_overseer: this.modelItem.pro_overseer,
      };
      if (this.modelItem.pro_area[1] == this.modelItem.pro_area[0]) {
        params.data.location.city = this.modelItem.pro_area[0];
      } else if (this.modelItem.pro_area[1] == this.modelItem.pro_area[2]) {
        params.data.location.city = this.modelItem.pro_area[0];
        params.data.location.area = this.modelItem.pro_area[1];
      } else {
        params.data.location.city = this.modelItem.pro_area[0];
        params.data.location.area = this.modelItem.pro_area[1];
        params.data.location.town = this.modelItem.pro_area[2];
      }
      params.url = this.urlDepartmentEdit;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '修改成功',
          });
          that.departmentModal = false;
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    newJindu() {
      if (this.jinduItem.sch_time !== '' && this.jinduItem.sch_content !== '') {
        if (this.saveRow.schedule === undefined) {
          this.saveRow.schedule = [];
        }
        this.saveRow.schedule.push({
          sch_time: this.jinduItem.sch_time,
          sch_content: this.jinduItem.sch_content,
        });
      }
      let params = {
        data: {
          _id: this.saveRow._id,
          schedule: this.saveRow.schedule,
        },
        url: this.urlDepartmentEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '上传进度成功',
            });
            this.submitSearch(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getAreaData(data) {
      this.area = data;
    },
    getAddress() {
      let params = {
        data: {},
        token: storage.session.get('token'),
        url: this.urlAddressList,
        success: res => {
          this.areaArr = res.data.result;
        },
      };
      ajaxPost(params);
    },
  },
  mounted() {
    this.submitSearch();
    this.getAddress();
  },
};
</script>
